<template>
	<view class="container">
		<bar-header></bar-header>
		<view class="search-fixed">
			<view class="search-box">
				<image class="sea-img" src="@/static/img/logo.png"></image>
				<view class="search-input">
					<view class="uni-input-form uni-column">
						<input class="uni-input" placeholder="请输入关键词" />
					</view>
					<image class="for-img" src="@/static/img/search-for.png"></image>
				</view>
			</view>
		</view>
		<view class="search-fixed-perch"></view>
		<view class="public-box">
			<u-swiper :list="bannerList" radius="10" indicator indicatorMode="line" circular height="320"></u-swiper>
		</view>
		<view class="menu-box">
			<swiper class="swiper" :style="{height: (120*btnGroup.rows)+60 + 'rpx'}">
				<swiper-item v-for="(item,index) in ctabs(btnGroup)" :key="index">
					<view class="swiper-uni">
						<view 
						class="menu-list"  
						:style="{width: (screenWidth-38)/btnGroup.num + 'px'}" 
						v-for="(val, i) in menuArr[index]" 
						:key="i">
							<image class="menu-icon"  :style="{'border-radius':bg(btnGroup.type)}" :src="imgHttps(val.icon)"></image>
							<view class="menu-text">{{val.text}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="coupon-box">
			<view class="coupon-back">
				<view class="coupon-lef">
					<image class="coupon-icon" src="@/static/img/coupon-img.png"></image>
					<view class="coupon-cont">
						<view class="cont-title">领劵大厅</view> 
						<view class="cont-desc">轻松得30元红包</view>
					</view>
				</view>
				<view class="coupon-btn">立即进入</view>
			</view>
		</view>
		<view class="public-box">
			<view class="single-group">
				<block v-for="(item,index) in list2" :key="index">
					<u--image class="single-img" :showLoading="true" :src="item" width="100%" height="220rpx" radius="10"></u--image>
				</block>
			</view>
		</view>
		
		<view class="public-box">
			<view class="goods-box">
				<view class="goods-list">
					<u--image :showLoading="true" src="../../static/img/un.png" width="100%" height="320rpx" radius="10"></u--image>
					<view class="goods-desc">
						<view class="goods-name">这是一个商品个商品个商品个商品</view>
						<view class="goods-price"><text class="price-i">￥</text>244.00</view>
					</view>
				</view>
				<view class="goods-list">
					<u--image :showLoading="true" src="../../static/img/un.png" width="100%" height="320rpx" radius="10"></u--image>
					<view class="goods-desc">
						<view class="goods-name">这是一个商品</view>
						<view class="goods-price"><text class="price-i">￥</text>244.00</view>
					</view>
				</view>
				<view class="goods-list">
					<u--image :showLoading="true" src="../../static/img/un.png" width="100%" height="320rpx" radius="10"></u--image>
					<view class="goods-desc">
						<view class="goods-name">这是一个商品</view>
						<view class="goods-price"><text class="price-i">￥</text>244.00</view>
					</view>
				</view>
				<view class="goods-list">
					<u--image :showLoading="true" src="../../static/img/un.png" width="100%" height="320rpx"></u--image>
					<view class="goods-desc">
						<view class="goods-name">这是一个商品</view>
						<view class="goods-price"><text class="price-i">￥</text>244.00</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar :currentTab="1"></tabbar>
	</view>
</template>

<script>
	import BarHeader from "@/components/header/BarHeader.vue"
	import tabbar from '@/components/tabbar/tabbar.vue'
	import baseUrl from '@/utils/baseUrl.js'
	import {imgHttps} from '@/utils/imgUrl.js'
	export default {
		components: {
			BarHeader,
			tabbar
		},
		computed: {
			iconWidth: function() {
				return 100/4;
			}
		},
		data() {
			return {
				imgHttps,
				keywoder: 'Hello',
				bannerList: [],
				cateList: [],
				list2: [
					'https://jzwl365.oss-cn-beijing.aliyuncs.com/zongkong/2021-05-25/60acb43459d5b.png',
					'https://jzwl365.oss-cn-beijing.aliyuncs.com/zongkong/2021-05-25/60acb434838b7.png'
				],
				indicator: true,
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				menuArr: [],
				menuBumber: 0,
				screenWidth:uni.getWindowInfo().screenWidth || 675,
				btnGroup: []
			}
		},
		onLoad(options) {
			this.getIndex();
		},
		onShow() {
		},
		methods: {
			 getIndex() {
				 let data = {
					 type: 1
				 }
				 this.$request({url:'/Renovation/getRenovationInfo', data}, 'GET').then(res => {
					const data = JSON.parse(res.msg);
					let listData = data.list;
					listData.forEach((item, index) => {
						console.log(item);
						switch (item.name) {
							case 'banner':
								let imgData = item.data.imglist;
								let banData = [];
								for(let i=0; i<imgData.length; i++) {
									banData.push(imgHttps(imgData[i]['url']));
								}
								this.bannerList = banData;
							break;
							case 'btnGroup':
								this.btnGroup = item.data;
								let mlist = [];
								for (var i = 0; i < this.ctabs(item.data); i++) {
									mlist.push(item.data.list.slice(0 + item.data.num * (i*item.data.rows), item.data.num * item.data.rows*(i  + 1)));
								}
								this.menuArr = mlist;
								console.log(this.menuArr);
							break;
						}
					})
				})
			},
			ctabs(data) {
				let n = 1;
				switch (data.rows) {
					case 1:
						//单行
						// console.log('单');
						n = Math.ceil(data.list.length / (data.num));
					break;
					case 2:
						// 双行
						// console.log('双');
						n = Math.ceil(data.list.length / (data.num * 2));
					break;
					default:
						break;
				}
				return n;
			},
			bg(type) {
				let i = 0;
				switch (type) {
					case 2:
						i = '20rpx';
					break;
					case 3:
						i = '50%';
					break;
					default:
					break;
				}
				return i;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-fixed {
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		z-index: 999;
	}
	.search-box {
		display: flex;
		align-items: center;
		margin: 20rpx 50rpx 40rpx;
		.sea-img {
			width: 70rpx;
			height: 70rpx;
			margin-right: 25rpx;
		}
		.search-input {
			width: 520rpx;
			height: 50rpx;
			border: 1rpx solid #ccc;
			padding: 5rpx 15rpx 5rpx 25rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			.uni-input {
				width: 100%;
				font-size: 28rpx;
				color: #545454;
			}
			.uni-input-placeholder {
				font-size: 25rpx;
				color: #CCCCCC;
			}
			.for-img {
				width: 48rpx;
				height: 40rpx;
			}
		}
	}
	
	.search-fixed-perch{
		height: 132rpx;
	}
	
	.public-box {
		padding: 0 30rpx;
	}
	
	.menu-box {
		display: flex;
		justify-content: space-between;
		justify-items: center; 
		margin: 30rpx 0;
		padding: 0 30rpx;
		
		.swiper-uni {
			display: flex;
			flex-wrap: wrap
		}
		.menu-list {
			font-size: 25rpx;
			width: 140rpx;
			margin: 20rpx 0;
		}
		
		.menu-icon {
			width: 64rpx;
			height: 64rpx;
			// border-radius: 100rpx;
			position: relative;
			left: 50%;
			transform: translate(-50%, 0);
		}
		
		.menu-text {
			font-size: 24rpx;
			margin-top: 10rpx;
			text-align: center;
		}
		
		.icon-img {
			width: 100%;
			height: 100%;
		}
	}
	
	
	.swiper {
		width: 100%;
	}
	
	.coupon-box {
		padding: 0 45rpx;
		margin-bottom: 50rpx;
		.coupon-back {
			// width: 100%;
			height: 130rpx;
			border-radius: 10rpx;
			border: 1px solid #e1e1e1;
			box-shadow: 0px 0px 40px -10px #e1e1e1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 35rpx;
		}
		.coupon-lef {
			display: flex;
			align-items: center;
			.coupon-icon {
				width: 90rpx;
				height: 90rpx;
				margin-right: 20rpx;
			}
			.coupon-cont {
				line-height: 35rpx;
			}
			.coupon-cont .cont-title {
				font-size: 30rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				color: #585555;
				font-family: Alibaba PuHuiTi-Bold;
			}
			.coupon-cont .cont-desc {
				font-size: 20rpx;
				color: #585555;
			}
		}
		.coupon-btn {
			padding: 10rpx 25rpx;
			background-color: #D9B97B;
			color: #000;
			font-size: 25rpx;
			border-radius: 10rpx;
		}
	}
	
	.single-img {
		margin-bottom: 30rpx;
		// box-shadow: 0px 3px 10px #666;
		border-radius: 8rpx;
	}
	
	.goods-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		.goods-list {
			width: 49%;
			height: 450rpx;
			background-color: #ffffff;
			box-shadow: 0px 3px 10px #ccc;
			margin-bottom: 30rpx;
			border-radius: 10rpx;;
		}
	}
	
	.goods-desc {
		line-height: 45rpx;
		margin: 20rpx 15rpx;
		.goods-name {
			font-size: 28rpx;
			color: #383636;
			overflow:hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow:ellipsis;
		}
		.goods-price {
			color: #F80606;
			font-size: 30rpx;
			.price-i {
				font-size: 24rpx;
			}
		}
	}
</style>
